<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/9/11 0011
  Time: 20:27
  To change this template use File | Settings | File Templates.
--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fnt" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<%
	String path = request.getContextPath();
	pageContext.setAttribute("path", path);
%>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
	<script type="text/javascript" src="/manage/js/lib/jquery/1.9.1/jquery.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="/manage/js/lib/html5shiv.js"></script>
<script type="text/javascript" src="/manage/js/lib/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="<%=path%>/manage/css/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="<%=path%>/manage/css/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="<%=path%>/manage/js/lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="<%=path%>/manage/css/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="<%=path%>/manage/js/lib/layui/css/layui.css"/>
<!--[if IE 6]>

<script type="text/javascript" src="/manage/js/lib/DD_belatedPNG_0.0.8a-min.js" ></script>

<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>添加公告管理 - H-ui.admin v2.4</title>
<meta name="keywords" content="H-ui.admin v3.0,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
<meta name="description" content="H-ui.admin v3.0，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。">
</head>
<body>

<article class="page-container" style="margin-left: -100px;">
	<form class="form form-horizontal" id="form-admin-add" action="#">
	<div class="row cl">
		<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>公告标题：</label>
		<div class="formControls col-xs-8 col-sm-9">
			<input type="text" class="input-text" value="" placeholder="公告标题" id="title" name="title">
		</div>
	</div>
	<div class="row cl">
		<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>公告封面：</label>
		<div class="formControls col-xs-8 col-sm-9">
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
				<legend>拖拽上传</legend>
			</fieldset>
			<div class="layui-upload-drag" id="test10">
				<i class="layui-icon"></i>
				<p>点击上传，或将文件拖拽到此处</p>
				<div class="layui-hide" id="uploadDemoView">
					<hr>
					<img src="" alt="上传成功后渲染" style="max-width: 196px">
				</div>
			</div>
		</div>
	</div>
	<div class="row cl">
		<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>公告信息：</label>
		<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
			<textarea id="editor" name="content"></textarea>
		</div>
	</div>
	<div class="row cl">
		<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
			<input class="btn btn-primary radius" type="button" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
		</div>
	</div>
	</form>
</article>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="/manage/js/lib/question-type/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="/manage/js/lib/layui/layui.js"></script>
<script type="text/javascript" src="/manage/css/static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="/manage/css/static/h-ui.admin/js/H-ui.admin.js"></script>

<!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/manage/js/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="/manage/js/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="/manage/js/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<!--/请在上方写此页面业务相关的脚本-->
<script>
	layui.extend({
		tinymce: '/manage/js/lib/layui_exts/tinymce/tinymce'
	}).use(['tinymce', 'util', 'layer'], function () {
		var t = layui.tinymce;
		var util = layui.util;
		var edit = t.render({
			elem: "#editor"
			, height: 600

			// ,uploadImage: {
			// 	url: '/manage/notice/rest/upload' //接口url
			// 	,type: 'post' //默认post
			// }
		},function(opt){
			//加载完成后回调
		});
	});

	layui.use('upload', function() {
		var $ = layui.jquery
				, upload = layui.upload;
		//拖拽上传
		upload.render({
			elem: '#test10'
			,url: '/manage/notice/lunBo/add'
			,accept: 'images'
			,acceptMime: 'image/*',
			choose: function(obj){  //上传前选择回调方法
				var flag = true;
				obj.preview(function(index, file, result){
					console.log(file);            //file表示文件信息，result表示文件src地址
					var img = new Image();
					img.src = result;
					img.onload = function () { //初始化夹在完成后获取上传图片宽高，判断限制上传图片的大小。
						if(img.width ==800 && img.height ==199){
							obj.upload(index, file); //满足条件调用上传方法
						}else{
							flag = false;
							layer.msg("您上传的小图大小必须是像素800*800px尺寸（2寸照片）！");
							return false;
						}
					}
					return flag;
				});
			}
			,done: function(json){
				//如果上传失败
				if(json.status === 0){ 	//上传成功
					layer.msg('上传成功');
					layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', json.data);
					console.log(json)
				}else {
					return layer.msg('上传失败-------');
				}
			}
		});
	});

	//添加公告信息
	$(".radius").click(function () {
		var title=$("#title").val();
		var content=tinyMCE.activeEditor.getContent();
		var image=$("#uploadDemoView").find('img').attr('src');
		if(title!=null&&content!=null&&image!=null){
			var data={title:title,content:content,image:image};
			$.ajax({
				url:"/manage/notice/insert-notice-message",
				data:data,
				type:'post',
				success:function (mes) {
					alert("添加成功!");
				}
			});
		}else{
			alert("公告信息不能为空!");
		}
	});
</script>
</body>
</html>